<template>
  <div>
    <div class="sco">
      <p>最受好评电影</p>
      <div class="coverInfo">
        <ul v-for="item in haopinglist" :key="item.id">
          <li class="itemInCovers">
            <img :src="item.img" alt="" />
            <span>{{ item.nm }}</span>
            <a v-if="item.sc % 1 === 0 && item.sc !== 0"
              >观众评分{{ item.sc }}.0</a
            >

            <a v-else-if="item.sc % 1 !== 0">观众评分{{ item.sc }}</a>
            <a class="eight" v-else-if="item.showCinemaNum == 0"
              >{{ item.wish }}人想看</a
            >
          </li>
        </ul>
      </div>
    </div>
    <main-hot :hotlist="oldhotlist"></main-hot>
    <main-hot :hotlist="hotlist"></main-hot>
  </div>
</template>

<script >
import MainHot from "@/components/MainHot.vue";

export default {
  name: "ReYing",
  data() {
    return {
      hotlist: [],
      oldhotlist: [],
      haopinglist: [],
    };
  },
  mounted() {
    this.$axios
      .get(
        "/api/mmdb/movie/v3/list/hot.json?ct=%E6%B7%B1%E5%9C%B3&ci=30&channelId=4"
      )
      .then((res) => {
        console.log(res);
        this.hotlist = res.data.data.hot;
        this.haopinglist = [...this.hotlist];
        this.haopinglist.sort((a, b) => {
          return b.sc - a.sc;
        });
      });

    this.$axios.get("./json/movieOnInfoList.json").then((res) => {
      console.log(res);

      this.oldhotlist = res.data.movieList;

      this.oldhotlist.forEach((item) => {
        item.img = item.img.replace("w.h", "64.90");
      });
    });
  },
  components: {
    MainHot,
  },
};
</script>

<style lang="less" scoped>
.mov {
  width: 100%;
  background: #fff;
}

.coverInfo {
  overflow-x: scroll;
  width: 9.733333rem;
  height: 3.946667rem;
  margin: auto;
  margin-top: 0.266667rem;
  position: relative;
  display: flex;
}

/* .coverInfo ul {
            list-style: none;
            display: -webkit-box;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: none;
            overflow: -moz-scrollbars-none;
        } */

.sco {
  width: 100%;
  height: 5.466667rem;
  border-bottom: 0.266667rem solid #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 150px;
  background: #fff;
}

.sco p {
  font-size: 14px;
  color: #333;
  width: 9.466667rem;
  margin: auto;
  height: 0.56rem;
  line-height: 1rem;
}

.coverInfo::-webkit-scrollbar {
  display: none;
}

.coverInfo img {
  width: 2.266667rem;
  height: 3.066667rem;
  margin-left: 0.266667rem;
  z-index: 999;
}

.sco .coverInfo:first-of-type {
  margin-left: 0;
}

.itemInCovers span {
  display: block;
  margin-left: 10px;
  font-size: 13px;
  color: #222;
  font-weight: 600;
  width: 2.266667rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sco .itemInCovers a {
  position: absolute;
  margin-left: 10px;
  font-weight: 600;
  margin-top: -40px;
  color: #faaf00;
  font-size: 11px;
  width: 2.266667rem;
  height: 0.53rem;
  display: block;
  background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
}

.lk {
  width: 100%;
  height: 3.04rem;
  border-bottom: 1px solid rgb(228, 228, 228);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.lk-left img {
  width: 1.706667rem;
  height: 2.4rem;
  margin-left: -26px;
}

.lk-right {
  width: 240px;
  height: 2.346667rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: -60px;
}

.lk-right-1 {
  width: 5.5rem;
  height: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  color: #666;
  font-size: 0.346667rem;
  margin-left: -10px;
}

.lk-right-1 > div:nth-child(1) {
  margin-top: -3px;
  display: flex;
}

.lk-right-1 > div:nth-child(1) > span:nth-child(1) {
  font-size: 0.453333rem;
  display: inline-block;
  color: #333;
  font-weight: 700;
  height: 22px;
  width: 5.12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: start;
}

.lk-right-1 > div:nth-child(1) > span:nth-child(2) img {
  width: 1.146667rem;
  height: 0.373333rem;
  display: inline-block;
}

.eight {
  font-weight: 700;
  color: #faaf00;
  font-size: 0.4rem;
}

.zi {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lk-right-2 {
  width: 1.44rem;
  height: 0.746667rem;
  /* background: #f03d37; */
  border-radius: 1.266667rem;
  text-align: center;
  line-height: 0.746667rem;
  color: #fff;
  margin-right: -20px;
  font-size: 0.373333rem;
}
</style>